<template>
    <section class="todoapp">
        <header class="header">
            <h1>Todos</h1>
            <input class="new-todo" placeholder="添加任务" autofocus v-model="todoThing"  @keydown="add">
        </header>
        <section class="main">
            <input id="toggle-all" class="toggle-all" type="checkbox" :checked="counter.isCheckAll"
                @change="counter.checkAll(!counter.isCheckAll)" />
            <label for="toggle-all">Mark all as complete</label>
            <things></things>
        </section>
        <footers></footers>
    </section>
</template>
<script setup>
import  todos  from './store/continue.js'
import things from './view/content.vue'
import footers from './view/Footer.vue'
import {ref} from 'vue'
const todoThing = ref('')
    const add = (e) => {
        if (e.key === 'Enter' && todoThing.value) {
            counter.addTodo(todoThing.value)
            todoThing.value = ''
        }
    }
const counter = todos()
</script>
<style>
@import url('./style/base.css')
</style>